<template>
  <!-- 公共头部 -->
  <div class="my-header">
    <div class="mh">
      <ul class="fl">
        <li class="fr header-text"><a>北京</a></li>
        <li style="color: #f10215"><i class="el-icon-location" style="font-size: 16px"></i></li>
      </ul>
      <ul class="fr header-text">
        <li>
          <a @click="toLogin" v-if="username === ''">
            你好，请登录
          </a>
          <a v-else>
            {{ username }}
            <a @click="logout">退出登录</a>
          </a>
          &nbsp;
          <a @click="goRegister">免费注册</a>
        </li>
        <li>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a @click="toCenter">个人中心</a></li>
        <li>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a>移动端</a></li>
      </ul>
    </div>
  </div>

</template>

<script>
  export default {
    name: "myHeader",

    // 钩子函数，页面加载就执行
    mounted(){
      const userName = localStorage.getItem('userName');
      if(userName === null || userName === ''){
        this.username = '';
      }else {
        this.username = userName;
      }
    },

    // 数据区
    data(){
      return{
        username: ''
      }
    },

    // 方法区
    methods:{

      // 个人中心
      toCenter(){
        this.$router.push("/center");
      },

      // 退出登录
      logout(){
        this.$store.commit("setToken", '');
        localStorage.setItem('userName', '');
        this.username = '';
        this.$router.push("/home?v=1");
      },

      // 登录
      toLogin(){
        this.$router.push('/login');
      },

      // 注册
      goRegister(){
        this.$router.push('/register');
      }

    }
  }
</script>

<style scoped>
  .my-header {
    background-color: #999;
    width: 100%;
    min-height: 4%;
    display: block;
  }

  .mh {
    line-height: 28px;
    width: 1188px;
    margin: auto;
    display: block;
  }

  ul {
    display: block;
    padding-inline-start: 0px;
    margin: 0px;
  }

  li {
    float: left;
    display: list-item;
    list-style: none;
    font-size: 12px;
  }

  li a{
    cursor:pointer
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .header-text {
    color: #fff;
  }
</style>
